import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { findDOMNode } from 'react-dom';
import { getEditor } from '../../api/getEdit';
import store from '../../store';


class PreviewChild extends Component{

    showMenu(e){
        e.preventDefault();
        e.stopPropagation();

        var previewName = $(findDOMNode(this)).find('.title span').html()

        store.dispatch({
            type: 'ACTIVE_PREVIEW',
            activePreview: previewName
        })

        var container = document.getElementById('preview');
        console.log(container)
        var menu = $('#preview-operation')
        $('#rename-preview').show();
        $('#delete-preview').show();
        var evt = e || window.event;
        var rightedge = e.clientX - container.offsetLeft;
        var bottomedge = document.body.clientHeight -e.clientY;

        if(rightedge < menu.width()){
            menu.css('left', e.clientX + 'px')
        }else{
            menu.css('left', e.clientX - menu.width() + 'px')
        }

        if(bottomedge < menu.height()){
            menu.css('top', e.clientY - menu.height() + 'px')
        }else{
            menu.css('top', e.clientY + 'px')
        }

        $('#folder-operation').hide();
        $('#preview-operation').show();
        return false; 
    }

    selectDetail(e){
        var checkPreview = findDOMNode(this);
        var previewName = $(findDOMNode(this)).find('.title span').html()
        
        $('.preview-child').removeClass('active')
        $(checkPreview).addClass('active');
        getEditor($(checkPreview).find('.summary').html());

        store.dispatch({
            type: 'ACTIVE_PREVIEW',
            activePreview: previewName
        })

        store.dispatch({
            type: 'CHECK_CONTAIN',
            isContain: true
        })

    }

    showFile(){
        var entend = $(findDOMNode(this)).find('.extend').text();
        switch (entend) {
            case '' :
        }
    }

    render(){
        if (this.props.preview.id === 'upload') {
            var srcs = 'http://localhost:3000/uploadFile/' + this.props.preview.tel + '/' + this.props.preview.filename;
            var extend = this.props.preview.filename.substring(this.props.preview.filename.lastIndexOf('.') + 1);
            console.log(extend);
            return (
                <li className="preview-child row" data-type={ this.props.preview.id} onContextMenu = {this.showMenu.bind(this)} onClick = {this.showFile.bind(this)}>
                    <div className="file-logo col-xs-3">
                        <i className="icon-file-alt"></i>
                    </div>
                    <div className="file-detail col-xs-9">
                        <div className="title"><span>{ this.props.preview.secondnav }</span></div>
                        <div className="time">{ this.props.preview.time }</div>
                        <a className="down-btn" href= { srcs } download>下载</a>
                    </div>
                    <span style = {{'display': 'none'}} className="extend">{ extend }</span>
                </li>
            )
            

        } else {
            return (
                <li className="preview-child" onClick={this.selectDetail.bind(this)} onContextMenu = {this.showMenu.bind(this)} data-type={ this.props.preview.id}>
                    <div className="title">
                        <i className="ic-svg ic-book"></i>
                        { this.props.preview.secondnav }
                    </div>
                    <div className="summary" dangerouslySetInnerHTML={{__html: this.props.preview.content}}>
                    </div>
                    <div className="time">
                    { this.props.preview.time }
                    </div>
                </li>
            )
        }
        
    }
}

const mapStateToProps  = (state) => {
    return {
        isContain: state.editReducer.isContain
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PreviewChild);
